<template>
  <div class="content-wrap">
    <div class="content">
      <div class="carousel slide block">
        <el-carousel height="200px">
          <el-carousel-item v-for="banner in bannerList" :key="banner" class="item">
            <img :src="banner">
          </el-carousel-item>
        </el-carousel>
      </div>
      <article v-if="notice" class="excerpt-minic excerpt-minic-index">
        <h2>
          <a class="red" href="#">【公告】</a>
        </h2>
        <p class="note">
          {{ notice }}
        </p>
      </article>
      <div class="title">
        <h3>最新发布 </h3>
      </div>
      <ListItem v-for="post in postList" :post="post" :key="post.id"></ListItem>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          :total="totalElements">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import {getOptionsBanner, getOptionsNotice} from "../api/options";
  import {getList} from "../api/post";
  import ListItem from '../components/ListItem'

  export default {
    name: "index",
    data() {
      return {
        pageNo: 1,
        totalElements: 0,
        bannerList: [],
        postList:[],
        notice:''
      }
    },
    created() {
      this.getBanner()
      this.getPost()
      this.getNotice()
    },methods: {
      getBanner() {
        getOptionsBanner().then(res => {
          this.bannerList = res.data
        })
      },
      getPost() {
        getList(this.pageNo).then(res => {
          this.postList = res.data.content
          this.pageNo = res.data.number + 1
          this.totalElements = res.data.totalElements
        })
      },
      getNotice() {
        getOptionsNotice().then(res => {
          this.notice = res.data
        })
      },
      handleCurrentChange(val) {
        this.pageNo = val
        this.getPost()
      }
    },
    components: {ListItem}
  }
</script>

<style scoped>

</style>
